import { defineComponent } from "vue";
import MyIcon from "./icon";
import iconData from "./utils/iconData";
import classes from "./demo.module.scss";

/** 图标数组 */
const iconArray = Object.keys(iconData).map((k) => k);

/** 图片类型 */
const iconTypeArray = ["filled", "outline"];

/** 渲染图标item */
const RenderIcon = (type: string) => {
  return (
    <div class={classes["icon-list"]}>
      {iconArray.map((item) => (
        <div class={classes["icon-item"]}>
          <MyIcon icon={item} type={type} class={classes["weui-icon"]}></MyIcon>
          <div class={classes.name}>{item}</div>
        </div>
      ))}
    </div>
  );
};

export default defineComponent({
  name: "IconDemo",
  setup() {
    return () => (
      <>
        {iconTypeArray.map((type) => (
          <>
            <p class={classes.title}>实心[type={type}]</p>
            {RenderIcon(type)}
          </>
        ))}
      </>
    );
  },
});
